<html>

<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <script type="text/javascript">
        var itemHeight = 40;
        var dividerHeight = 1;

        function openMenu(obj) {
            menuTitleId = obj.id;
            menuId = "menu" + menuTitleId.substring(10);
            indicatorId = "indicator" + menuTitleId.substring(10);

            menu = document.getElementById(menuId);
            indicator = document.getElementById(indicatorId);
            height = menu.style.height;

            if (height == "0px" || height == "") {
                childAmount = menu.getElementsByTagName('div').length;
                dividerAmount = menu.getElementsByTagName('li').length;
                height = childAmount * itemHeight + dividerAmount * dividerHeight;
                menu.style.height = height + "px";
                indicator.style.transform = "rotate(180deg)";
            } else {
                menu.style.height = "0px";
                indicator.style.transform = "rotate(0deg)";
            }
        }
    </script>
    <style>
        .menus {
            width: 320px;
            overflow: hidden;
            box-shadow: 1px 1px 4px gray;
            /* border-bottom: 1px solid black;
border-top: 1px solid black; */
            border: 1px solid gray;
            border-radius: 5px;
        }

        .menu {
            overflow: hidden;
            height: 0px;
            transition: all 0.3s ease;
        }

        .menu_title {
            width: 305px;
            height: 50px;
            line-height: 50px;
            background: #fafafa;
            color: gray;
            font-size: 20px;
            padding-left: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            font-weight: bold;
            overflow: hidden;
        }

        .menu_title:hover {
            background: #dedede;
            color: black;
        }

        .indicator {
            width: 50px;
            height: 50px;
            font-weight: bold;
            position: absolute;
            right: 0px;
            top: 0px;
            transition: all 0.3s ease;
            font-weight: bold;
            text-align: center;
        }

        .item {
            width: 290px;
            height: 40px;
            line-height: 40px;
            background: gray;
            color: white;
            padding-left: 30px;
            transition: all 0.3s ease;
            cursor: pointer;
            overflow: hidden;
        }

        .item:hover {
            background: #B22222;
        }

        .item a {
            width: 290px;
            height: 40px;
            display: block;
            text-decoration: none;
            color: white;
            text-decoration: none;
        }

        .item_divider {
            width: 322px;
            height: 1px;
            background: white;
            display: block;
            opacity: 0.8;
        }

        .menu_divider {
            width: 100%;
            height: 1px;
            background: gray;
        }
</style>
</head>
<body>

<div class="menus">

    <div id="menu_title1" class="menu_title" onclick="openMenu(this)">
        首页
        <div class="indicator" id="indicator1">^</div>
    </div>
    <div class="menu" id="menu1">
        <div class="item">
            <a href="#">简介</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">大事记</a>
        </div>
    </div>

    <li class="menu_divider"></li>

    <div id="menu_title2" class="menu_title" onclick="openMenu(this)">
        职位
        <div class="indicator" id="indicator2">^</div>
    </div>
    <div class="menu" id="menu2">
        <div class="item">
            <a href="#">开发组</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">竞赛组</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">SC小组</a>
        </div>
    </div>

    <li class="menu_divider"></li>
</div>
</body>
</html>
